<template>
    <sub-box v-loading="loading">
        <breadcrumb :title="'申请详情'"></breadcrumb>
        <div class="box white-block mt20" v-if="detail&&detail.flowParam&&detail.flowParam[0]">
            <el-timeline>
                <el-timeline-item
                    :type="((list.operType==1 || list.operType==2) || (!list.operType && list.result==1) || list.implementationState==0)?'primary':((!list.operType && list.result==2) || list.implementationState==1?'success':'danger')"
                    v-for="(list,index) in detail.flowParam" :key="index" v-if="(!moreFlow&&index<4) || moreFlow">
                    <div class="timeline-card" v-if="!list.order">
                        <el-card class="mr20">
                            <template v-if="list.operType">
                                <p class="time" v-if="list.operType==1">已提交申请</p>
                                <p class="time" v-if="list.operType==2">重新提交申请</p>
                                <p class="time" v-if="list.operType==3">已取消</p>
                            </template>
                            <template v-else-if="list.result">
                                <p class="time" v-if="list.result==1">待审核</p>
                                <p class="time" v-else-if="list.result==2">审核通过</p>
                                <p class="time" v-else-if="list.result==3">审核不通过</p>
                            </template>
                            <p class="name clearfix">
                                <span>{{list.modifyTime || list.createTime}}</span>
                                {{list.deptName}}
                                <i v-if="list.approvalName">{{list.approvalName}}</i>
                            </p>
                            <p class="remark" :class="{error:list.type==3}" v-if="list.auditOpinion">
                                审核说明：{{list.auditOpinion}}
                            </p>
                        </el-card>
                        <div class="timeline-btn"></div>
                    </div>
                    <div class="timeline-card" v-else>
                        <el-card class="mr20">
                            <p class="time">
                                {{list.implementationState==0?'实施中':(list.implementationState==1?'实施已完成':(list.implementationState==2?'实施已中止':'实施已回收'))}}</p>
                            <p class="name clearfix" v-if="list.implementationState!=0">
                                <span>{{list.approvalTime}}</span>
                                {{list.finishDeptName}}
                                <i v-if="list.finishUsername">{{list.finishUsername}}</i>
                            </p>
                            <p class="remark" :class="{error:list.type==3}" v-if="list.auditOpinion">
                                审核说明：{{list.auditOpinion}}
                            </p>
                        </el-card>
                        <div class="timeline-btn"></div>
                    </div>
                </el-timeline-item>
            </el-timeline>
            <div class="text-center showMore" v-if="detail.flowParam.length>4">
                <el-link type="primary" :underline="false" v-if="!moreFlow" @click="showChange">点击显示全部</el-link>
                <el-link type="primary" :underline="false" v-else @click="showChange">点击收起全部</el-link>
            </div>
        </div>
        <div class="resourceInfoBox mt20 white-block" v-if="resourceInfo">
            <p>资源信息</p>
            <div class="resourceInfo">
                <div class="p">
                    <p>
                        {{resName}}
                    </p>
                    <span>资料来源：
                            {{resSourceDept}}
                        </span>
                </div>
            </div>
            <div class="checkMsg">
                <div class="check1" v-for="item in checkList" :key="item.id">
                    <el-checkbox v-model="item.checked" :disabled="disabled">
                        {{item.chineseName}}
                    </el-checkbox>
                </div>
            </div>
        </div>
        <div class="white-block mt20" v-if="table">
            <table-example :data="resTable" :tableColumn="header" :slotColumns="slotColumns" class="mt20">
                <template slot="resName" slot-scope="scope">
                    <span v-if="!scope.row.serviceAddress">{{scope.row.resName}}</span>
                    <span v-else>{{scope.row.resName + '（' + scope.row.serviceAddress + '）'}}</span>
                </template>
            </table-example>
        </div>
        <div class="box-th white-block mt20" v-if="detail&&resDetail">
            <div class="form-common clearfix">
                <div class="form-item" v-if="!this.offLine&&detail.selfSysParam&&detail.selfSysParam[0]">
                    <div class="form-item-label">绑定应用</div>
                    <div class="form-item-content">
                        <div v-for="(list,index) in detail.selfSysParam" :key="index">
                            <div>{{list.sysName}}</div>
                            <div>
                                <!--                                唯一代码：{{list.sysCode}};-->
                                IP地址：{{list.ip.split(',').join('，')}}
                            </div>
                        </div>
                    </div>
                </div>
                <div class="form-item" v-if="dataOrigin">
                    <div class="form-item-label">数据源</div>
                    <div class="form-item-content">
                        <p>{{rdDbDict.dbDesc}}</p>
                        <p>ip地址：{{rdDbDict.dbIp}}</p>
                        <p>端口：{{rdDbDict.dbPort}}</p>
                        <p>数据库名称：{{rdDbDict.dbName}}</p>
                        <p>服务器类型：{{rdDbDict.dbType}}</p>
                        <p>用户名：{{rdDbDict.dbUser}}</p>
                        <p>密码：{{rdDbDict.dbPasswd}}</p>
                    </div>
                </div>
                <div class="form-item">
                    <div class="form-item-label">申请机构</div>
                    <div class="form-item-content">{{resDetail.applyDeptName}}</div>
                </div>
                <div class="form-item">
                    <div class="form-item-label">申请人</div>
                    <div class="form-item-content">{{resDetail.applyUserName}}</div>
                </div>
                <div class="form-item">
                    <div class="form-item-label">联系人</div>
                    <div class="form-item-content">{{resDetail.contactName}}</div>
                </div>
                <div class="form-item">
                    <div class="form-item-label">联系电话</div>
                    <div class="form-item-content">{{resDetail.contactTel}}</div>
                </div>
                <div class="form-item">
                    <div class="form-item-label">申请说明</div>
                    <div class="form-item-content">{{resDetail.remark}}</div>
                </div>
                <div class="form-item">
                    <div class="form-item-label">相关文件</div>
                    <div class="form-item-content">
                        <div v-for="(list,index) in resDetail.fileInfo" :key="index">
                            <i class="el-icon-document"></i>{{list.fileName}}
                            <a :href="list.path" target="_blank" class="ml20">
                                <el-button type="primary" size="mini">下载</el-button>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="white-block mt20" v-if="detail&&resDetail&&resDetail.approvalResult==1">
            <audit @save="auditSave" @del="$method.historyBack()" :labelWidth="'90px'" :showType.sync="preselectRes"
                   :showBtn="true"></audit>
        </div>
    </sub-box>
</template>

<script>
    import subBox from '../../components/layout/layout-sub'
    import breadcrumb from '../../components/breadcrumb'
    import tableExample from '../../components/table'
    import audit from '../../components/audit'

    export default {
        data() {
            return {
                header: [
                    {
                        prop: 'resName',
                        label: '名称',
                        minWidth: '60%',
                        align: 'center'
                    },
                    {
                        prop: 'resSourceDept',
                        label: '提供单位',
                        minWidth: '40%',
                        align: 'center'
                    }
                ],
                slotColumns: ['resName'],
                id: '',
                orderNo: '',
                detail: null,
                loading: false,
                applyNumChild: '',
                historyList: [],
                offLine: false,
                resDetail: null,
                preselectRes: null, // 审核是否可以选择资源类型
                fromImplementation: false, // 是否来自实施工单
                resTable: [],
                moreFlow: false,
                resourceInfo: false,
                checkList: [],
                resName: '',
                resSourceDept: '',
                collectionSituation: '',
                dataOrigin: false,
                table: false,
                rdDbDict: {},
                collection: '',
                rdDbAppList: []
            }
        },
        mounted() {
            if (this.$route.query.applyNumChild) this.applyNumChild = this.$route.query.applyNumChild
            if (this.$route.query.id) this.id = this.$route.query.id
            if (this.$route.query.offLine) this.offLine = JSON.parse(this.$route.query.offLine)
            if (this.$route.query.preselectRes) this.preselectRes = this.$route.query.preselectRes
            if (this.$route.query.fromImplementation) this.fromImplementation = true
            this.getDetail()
        },
        watch: {
            detail(val) {
                val.flowParam.reverse()
                if (val.oneOrderParam && val.oneOrderParam.implementationState !== null) {
                    val.flowParam.unshift(
                        {
                            order: true, // 区分是实施工单
                            ...val.oneOrderParam
                        }
                    )
                }
            }
        },
        methods: {
            // 获取详情页面数据
            getDetail() {
                this.loading = true
                let url = '/rdResourceApplicationDetail/selectResApplyDetails'
                if (this.offLine) url = '/rdResForOnline/selectOnlineDetail'
                this.$http.get(url, {
                    applyNumChild: this.applyNumChild,
                    id: this.id,
                    implementationOrderOrNot: this.fromImplementation
                }).then(result => {
                    this.loading = false
                    if (result.success) {
                        this.detail = result.data
                        this.resDetail = result.data.resDetailParam || result.data.onlineParam
                        this.resName = this.resDetail.resName
                        this.resSourceDept = (result.data.dirParam && result.data.dirParam[0].resSourceDept)
                        this.collectionSituation = (result.data.dirParam && result.data.dirParam[0].collectionSituation) || result.data.resDirParam.collectionSituation
                        if (this.resDetail.resType === 3) {
                            if (this.collectionSituation === 1 && !this.offLine) {
                                this.disabled = true
                                this.table = false
                                this.resourceInfo = true
                                this.dataOrigin = true
                                this.checkList = result.data.rdResDataItemList || result.data[0].rdResDataItemList
                                this.rdDbAppList = result.data.rdDbAppList || result.data[0].rdDbAppList
                                this.rdDbDict = result.data.rdDbDict || result.data[0].rdDbDict
                                if (this.rdDbAppList.length !== 0) {
                                    for (let i = 0; i < this.checkList.length; i++) {
                                        this.rdDbAppList.forEach((item, index) => {
                                            if (this.checkList[i].id === item.itemId) {
                                                this.checkList[i].checked = true
                                            }
                                        })
                                    }
                                }

                            } else {
                                this.table = true
                                this.resourceInfo = false
                                this.dataOrigin = false
                            }
                        } else {
                            this.table = true
                            this.resourceInfo = false
                        }
                        if (this.offLine) {
                            this.resTable.push(result.data.resDirParam)
                        } else {
                            this.resTable = result.data.dirParam
                        }
                    }
                }).catch(() => {
                    this.loading = false
                })
            },
            auditSave(form, list, callback) {
                this.loading = true
                let url = '', obj = {}
                if (this.offLine) {
                    url = '/rdResForOnline/applyToOnline'
                    obj = {
                        applicationNum: this.resDetail.applicationNum,
                        resId: this.resDetail.resId,
                        result: form.state,
                        auditOpinion: form.remark,
                        preselectResType: form.type // 预选资源类型
                    }
                } else {
                    url = '/rdResourceApplicationDetail/updateApplyDetailOnLine'
                    obj = {
                        applyNumChild: this.resDetail.applyNumChild,
                        resId: this.resDetail.resId,
                        result: form.state,
                        auditOpinion: form.remark
                    }
                }
                this.$http.post(url, obj).then(result => {
                    this.loading = false
                    if (result.success) {
                        this.$emit('upload')
                        if (callback) callback()
                        this.$nextTick(() => {
                            this.$method.historyBack()
                        })
                    }
                }).catch(() => {
                    this.loading = false
                })
            },
            showChange() {
                this.moreFlow = !this.moreFlow
            }
        },
        components: {
            breadcrumb,
            tableExample,
            subBox,
            audit
        }
    }
</script>
<style scoped lang="less">
    .resourceInfoBox {
        .resourceInfo {
            background-color: #eee;
            padding: 20px;
            margin-top: 20px;
            /*padding-top: 20px;*/

            .p {
                color: #444;
                border-bottom: 1px solid #ccc;

                p {
                    color: #444;
                    font-size: 18px;
                }

                span {
                    line-height: 30px;
                }
            }
        }

        .checkMsg {
            background-color: #eee;
            padding: 20px;
            padding-top: 0;

            .check1 {
                width: 200px;
                line-height: 40px;
                display: inline-block;
            }
        }
    }

    .box {
        padding: 30px 20%;

        .timeline-card {
            display: inline-flex;
            align-items: center;
            width: 100%;

            > * {
                flex: auto;
            }

            .el-card {
                width: 80%;
            }

            .timeline-btn {
                width: 20%;

                button {
                    border-radius: 20px;
                }
            }
        }

        .time {
            font-size: 18px;
            margin-bottom: 3px;
        }

        .name {
            span {
                float: right;
            }
        }

        .remark {
            color: #999;

            &.error {
                color: #E00000;
            }
        }

    }
</style>
